<template>
  <!-- <div class="videoItem" :style="{background:`url(${item.images[0].url})`}"> -->
  <div class="videoItem" v-if="item">
      <router-link :to="{
          name:`XiaoDetail`,
            params:{
                item:item
            }
      }">
        <img :src="item.images[0].url" alt="" />
      </router-link>
    
    <div class="videoInfo">
      <div class="vv-top">
        <p class="content">{{item.title}}</p>
      </div>
      <div class="vv-bottom">
        <div class="left">
          <img :src="item.user.avatarurl" alt="" /><span class="nickname"></span>
        </div>

        <div class="middle">
          <p class="nickname">{{item.user.nickName}}</p>
        </div>
        <div class="right" @click="dianzan=!dianzan">
          <p>
            <i  :class="['iconfont','icon-dianzan1',{dian:dianzan}]" aria-hidden="true"></i
            ><span class="score">&nbsp;{{dianzan?item.upCount+1:item.upCount}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    props:["item"],
    data(){
        return{
            dianzan:false
        }
    },
    
}
</script>
<style lang="less" scoped>
    .videoItem{
        position: relative;
        width:185px;
        height: 300px;
        img{
            display: block;
            width: 185px;
            height: 300px;
            // position: absolute;
        }
        .videoInfo{
            position: absolute;
            bottom: 15px;
            left: 10px;
            z-index: 1;
            
            .vv-top{
                font-size: 15px;
                margin-bottom: 10px;
                // height: 30px;
                overflow: hidden;
                p{
                    color: white;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
            .vv-bottom{
                display: flex;
                align-items: center;
                padding-right: 20px;
                .left{
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;
                    img{
                        display: block;
                        width: 20px;
                        height: 20px;
                    }
                }
                .middle{
                    font-size: 15px;
                    color: white;
                    flex: 1;
                }
                .right{
                    font-size: 15px;
                    color: white;
                    i{
                        &.dian{
                            color: red;
                        }
                    }
                }
            }
        }
    }
</style>